<template>
	<view class="page">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true" @scrolltolower="loadMore">
					<view class="info">
						<!-- #ifdef MP-WEIXIN -->
						<button size="mini" type="default" v-if="type==0" @click="uplaodThumb">上传图片到图库</button>
						<button size="mini" type="default" v-if="type==1" @click="uplaodThumb">上传视频到图库</button>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<button size="mini" type="default" style="background: #eee;" v-if="type==0" @click="uplaodThumbImg">上传图片到图库</button>
						<button size="mini" type="default" style="background: #eee;" v-if="type==1" @click="uplaodThumbVideo">上传视频到图库</button>
						<!-- #endif -->
						<button size="mini" type="primary" @click="submit">确定</button>
						<button size="mini" type="warn" @click="close">关闭</button>
					</view>
					<!-- 选择图片 -->
					<view style="padding-top: 106rpx;">
						<view class="info_list" v-for="(item,idx) in list" v-if="list.length>0">
							<view class="title">{{item.title}}</view>
							<block v-for="it in item.list">
								<view class="info_content">
									<!-- #ifdef MP-WEIXIN -->
									<video v-if="type==1" :src="it.url" @click="addImg(it.url)"></video>
									<!-- #endif -->
									<!-- #ifdef MP-ALIPAY -->
									<view class="info_video" v-if="type==1" @click="addImg(it.url)">
										<video :src="it.url" style="width: 100%;height: 100%;position: relative;z-index: 1;" @click="addImg(it.url)"></video>
									</view>
									<!-- #endif -->
									<image v-if="type==0" :src="it.url" @click="addImg(it.url)"></image>
									<view class="mask" @click="addImg(it.url)" v-if="imgs.includes(it.url)">
										<image src="/static/selected.png" mode="widthFix"></image>
									</view>
								</view>
							</block>
						</view>
						<view class="none_data" v-else>暂未上传图片</view>
					</view>
					<view class="empty_loading" style="padding-bottom: 100rpx;">
						<image v-if="isloading" src="/static/business/loading.gif" ></image>
						<view v-if="ismore">没有更多了~</view>
					</view>
				</scroll-view>
			</view>
	</view>
</template>

<script>
	export default {
		name:"galleryList",
		props: {
			isMultiple:{
				type: Boolean,
				default: false,
			},
            uid:{
				type: [String,Number],
				default: 0,
			},
			type: {
				type: Number,
				default: 0,
			}
			// list: {
			// 	type: Array,
			// 	default: []
			// }
		},
		data() {
			return {
				imgs: [],
				list: [],
				id: 0,
				page:0,
				isloading: false,
				ismore: false,
			};
		},
		watch: {
			uid: function(newVal,oldVal){
				this.id = newVal;
				this.page = 0;
				this.list = [];
				console.log(newVal)
				newVal && this.getImgs();
			},
			type: function(newVal,oldVal){
				this.page = 0;
				this.list = [];
				console.log(newVal)
				this.getImgs();
			},
		},
		mounted() {
			this.getImgs();
		},
		methods: {
			loadMore() {
				this.getImgs();
			},
			getImgs(){
				this.page++;
				this.isloading = true;
				this.ismore = false;
				this.$axios('picwarehouse/lists','POST','supplier',{
					page: this.page,
                    uid: this.id,
					type: this.type
				}).then(res=>{
					uni.hideLoading();
					if(res.data.code == 200){
						this.isloading = false;
						this.list = [...this.list,...res.data.data];
						this.ismore = res.data.data.length <= 0;
					}
				})
			},
			submit(){
				this.$emit('changeImg',this.imgs);
				setTimeout(()=>{
					this.imgs = [];
				},50);
			},
			close(){
				this.imgs = [];
				this.$emit('changeImg',this.imgs);
			},
			addImg(img){
				if(this.isMultiple){
					if(this.imgs.includes(img)){
						this.imgs = this.imgs.filter(function(item, idx){
							return img != item;
						});
					}else{
						this.imgs.push(img)
					}
				}else{
					this.$emit('changeImg',img);
				}
			},
			uplaodThumb() {
				var that = this;
				let arr = '';
				let token = uni.getStorageSync('token');
				let url = '';
				let type;
				if(this.type==0){
					type = 'image';
				}else{
					type = 'video';
				}
				uni.chooseMedia({
					count: 9,
					mediaType: [type],
					success(res) {
						uni.showLoading({
							title: '上传中,请稍后'
						});
						console.log(res);
						// return;
						for (let i in res.tempFiles) {
							if(res.tempFiles[i].fileType =='image'){
								url = that.$url.state.url.upload;
							}else if(res.tempFiles[i].fileType=='video'){
								url = that.$url.state.url.uploadvod;
							}
							// console.log(url);
							// return;
							uni.uploadFile({
								url: url,
								filePath: res.tempFiles[i].tempFilePath,
								name: 'a',
								header: {
									token
								},
								formData: {
									'file': 'a'
								},
								success(upres) {
									var data = JSON.parse(upres.data);
									if (data.code == 200) {
										arr = data.data.url;
										that.imgs.push(arr);
									} else {
										that.$api.msg(data.data)
									}
								},
								fail() {
									setTimeout(() => {
										that.$api.msg('上传失败，请重试')
									}, 100)
								},
								complete() {
									if (i == res.tempFiles.length - 1) {
										uni.hideLoading();
										that.submitS()
									}
								}
							})
						}
					},
				})
			},
			uplaodThumbImg(){
				var that = this;
				let arr = '';
				let token = uni.getStorageSync('token');
				that.imgs = [];
				uni.chooseImage({
					count: 9,
					success(res) {
						uni.showLoading({
							title: '上传中,请稍后'
						});
						if(res.tempFiles.length>0){
							for (let i in res.tempFiles) {
								uni.uploadFile({
									url: that.$url.state.url.upload,
									filePath: res.tempFiles[i].path,
									name: 'a',
									header: {
										token
									},
									formData: {
										'file': 'a'
									},
									success(upres) {
										var data = JSON.parse(upres.data);
										if (data.code == 200) {
											arr = data.data.url;
											that.imgs.push(arr);
											console.log(that.imgs)
											if (i == res.tempFiles.length - 1) {
												that.submitS()
											}
										} else {
											that.$api.msg(data.data)
										}
									},
									fail() {
										setTimeout(() => {
											that.$api.msg('上传失败，请重试')
										}, 100)
									}
								})
							}
						}
					},
				})
			},
			uplaodThumbVideo(){
				var that = this;
				let arr = '';
				let token = uni.getStorageSync('token');
				that.imgs = [];
				uni.chooseVideo({
					count: 1,
					success(res) {
						uni.showLoading({
							title: '上传中,请稍后'
						});
						uni.uploadFile({
							url: that.$url.state.url.uploadvod,
							filePath: res.tempFilePath,
							name: 'a',
							header: {
								token
							},
							formData: {
								'file': 'a'
							},
							success(upres) {
								var data = JSON.parse(upres.data);
								if (data.code == 200) {
									arr = data.data.url;
									that.imgs.push(arr);
								} else {
									that.$api.msg(data.data)
								}
							},
							fail() {
								setTimeout(() => {
									that.$api.msg('上传失败，请重试')
								}, 100)
							},
							complete() {
								uni.hideLoading();
								that.submitS()
							}
						})
					},
				})
			},
			submitS(){
				uni.showLoading({
					title: '上传中,请稍后'
				});
				// #ifdef MP-ALIPAY
				this.imgs = this.imgs.map(item => `${item}`).join(',');
				// #endif
				setTimeout(()=>{
					this.$axios('picwarehouse/submit','POST','supplier',{
						url: this.imgs,
						uid: this.uid,
						type: this.type
					}).then(res=>{
						uni.hideLoading();
						if(res.data.code == 200){
							this.$api.msg(res.data.data);
							this.imgs = [];
							this.page = 0;
							this.list = [];
							this.getImgs();
						}
					})
				},500)
			},
		}
	}
</script>

<style lang="scss" scoped>
.page{
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info{
		padding: 20rpx 10rpx;
		display: flex;
		position: fixed;
		background: #fff;
		z-index: 999;
		width: 100%;
	}
	.info_list{
		// display: flex;
		// flex-wrap: wrap;
		margin-right: -10rpx;
		padding-left: 10rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 14rpx;
		.title{
			width: 100%;
			margin-bottom: 10rpx;
		}
		.info_content{
			width: 200rpx;
			height: 146rpx;
			margin: 0 10rpx 10rpx 0;
			position: relative;
			image,video{
				width: 100%;
				height: 100%;
				display: block;
			}
			.info_video{
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(255,255,255,1);
				top: 0;
				left: 0;
				z-index: 2;
				video{
					position: absolute;
					z-index: 1;
				}
			}
			.mask{
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(255,255,255,.3);
				top: 0;
				left: 0;
				image{
					width: 60rpx;
					display: block;
					float: right;
				}
			}
		}	
	}
}
</style>